<template>
	<view class="charts-box">
		<qiun-data-charts :type="type" :chartData="chartData" :opts="opts" :ontouch="ontouch"></qiun-data-charts>
	</view>
</template>

<script>
	/**
	 * enableScroll 是否可滑动
	 * scrollShow 是否显示底部滑动条
	 * chartData 显示数据
	 * type 图表样式 column 柱状图 | line 折线图 | pie 饼状图 | ring 圆环图 | arcbar 进度条
	 * color 图表颜色
	 * 
	 */
	export default {
		name: "unitCharts",
		props: {
			enableScroll: {
				type: Boolean,
				default: false
			},
			scrollShow: {
				type: Boolean,
				default: false
			},
			chartData: {
				type: Object,
				default: {}
			},
			type: {
				type: String,
				default: ''
			},
			color: {
				type: Array,
				default: []
			},
			ringTitle: {
				type: Object,
				default: {}
			},
			ringsubTitle: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				ontouch: 'true', //是否可触摸（要想拖动图标必须设置为可触摸）
				///图标配置参数
				opts: {
					//显示的颜色
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					enableScroll: false, //开启滚动
					legend: {
						// position: "bottom", //类标题位置
					},
					//x轴配置信息
					xAxis: {
						disableGrid: true,
						// scrollShow: true, //显示滚动条
						itemCount: 4
					},
					extra: {
						column: {
							activeBgColor: "#00ffff", //点击选中列的阴影颜色
							activeBgOpacity: 0.08, //设置点击阴影颜色透明度
							// seriesGap: 5,
							// linearOpacity: 0.5,
							// barBorderCircle: true, //设置顶部为圆角样式
							// linearType: "custom", //自定义渐变颜色类型
							// //添加渐变颜色
							// customColor: [
							// 	"#FA7D8D",
							// 	"#EB88E2"
							// ]
						}
					}
				}
				//显示的基础数据
				// chartData: {
				// 	//x坐标轴显示信息
				// 	categories: ['2023-01-01', '2023-01-02', '2023-01-03', '2023-01-04', '2023-01-05', '2023-01-06'],
				// 	//列分类显示信息（y轴信息）
				// 	series: [{
				// 			name: '目标值',
				// 			data: [35, 36, 31, 33, 13, 34]
				// 		},
				// 		{
				// 			name: '完成量',
				// 			data: [18, 27, 21, 24, 6, 28]
				// 		}
				// 	]
				// },
			}
		},
		mounted() {
			this._chageOpts()
		},
		methods: {
			_chageOpts() {
				this.opts.enableScroll = this.enableScroll
				if (this.enableScroll) {
					this.ontouch = true;
				}
				if (this.scrollShow) {
					this.opts.xAxis.scrollShow = true;
				}
				if (this.color != undefined && this.color.length > 0) {
					this.opts.color = this.color
				}
				if (this.ringTitle != undefined) {
					this.opts.title = this.ringTitle
				}
				if (this.ringsubTitle != undefined) {
					this.opts.subtitle = this.ringsubTitle
				}
			}
		}
	}
</script>

<style>
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>
